<!-------------------------------------------------------------------------------------
*文件：VideoMonitoring（远程无线摄像头门禁系统）
*
*作者：Liyw  2016.7.7
*
*说明：该文档主要包括界面框架（div）,功能的实现和信息的显示（主js）
       主js在js/script.js文件中
*
*修改：Zhouly 2016.11.25
*      1.将注释格式统一规范化，优化代码格式
*      2.将lang属性改成"zh-cmn-Hans"
*      3.删除images里多余图片
*      4.将js分离到script.js文件夹里
       5.添加图标logo
*修改：Shuozi 2023.6.26
*      1.新增警报模式脚本detection_script.js，利用红外感应来拍摄照片
*      2.新增远程开关门锁脚本door_script.js，可以远程控制门锁开关
*      3.新增警报灯手动开关脚本light_script.js,控制警报灯开关
---------------------------------------------------------------------------------------->
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8" />
    <title>门禁监控系统</title>
    <link href="./bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="./css/style.css" rel="stylesheet" />
    <style>
        .input-group-addon {
            width: 100px;
        }

        .input-group[class*="col-"] {
            float: left;
            padding-left: 10px;
            margin-top: 10px;
        }

        .btn-group {
            padding-left: 10px;
            margin-top: 10px;
        }

        .controller button {
            width: 50px;
            height: 30px;
            font-weight: 700;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="container">
            <h3 class="text-center">
                视频监控
            </h3>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">控制台</h3>
                        </div>
                        <div class="panel-body" style="height: 700px;">
                            <div class="input-group controller col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
                                <p id="DoorConnectState">
                                    门锁服务连接中
                                </p>
                                <p id="DetectionConnectState">
                                    红外服务连接中
                                </p>
                                <p id="LightConnectState">
                                    警报灯连接中
                                </p>
                                <button type="button" id="switch" class="btn btn-success"
                                    style="margin-top:0px;margin-left:5%;width: auto;">
                                    开启摄像头
                                </button>
                                <button type="button" id="ct_up" class="btn btn-default"
                                    style="margin-top:50px;margin-left:10%;">
                                    ↑
                                </button>
                                <button type="button" id="ct_left" class="btn btn-default"
                                    style="margin-top:80px;margin-left:3%;">
                                    ←
                                </button>
                                <button type="button" id="ct_right" class="btn btn-default"
                                    style="margin-top:80px;margin-left:17%;">
                                    →
                                </button>
                                <button type="button" id="ct_down" class="btn btn-default"
                                    style="margin-top:110px;margin-left:10%;">
                                    ↓
                                </button>
                                <button type="button" id="ct_h" class="btn btn-default"
                                    style="margin-top:140px;margin-left:3%;">
                                    水平
                                </button>
                                <button type="button" id="ct_v" class="btn btn-default"
                                    style="margin-top:140px;margin-left:17%;">
                                    垂直
                                </button>
                                <button type="button" id="imgSnapshot" class="btn btn-default"
                                    style="margin-top:170px;margin-left:10%;">
                                    截屏
                                </button>
                                <!--button type="button" id="3secondshot" class="btn btn-default"
                                    style="margin-top:200px;margin-left:3%;width: auto;">
                                    保存3秒的视频
                                </button-->
                                <button type="button" id="detection_switch" class="btn warn"
                                    style="margin-top: 20px;margin-left: 35%;width: auto;">
                                    打开检测模式
                                </button>
                                <img class="detection_state" id="bgd_images" src="images/alarm-off.png"
                                    style="margin-top: 0%;margin-left: 70%;" width="50" height="50">
                                <p type="text" style="margin-top: 10%;margin-left: 40%;font-size: medium;">
                                    红外探测：<span class="condition" id="detection_state">检测关闭</span>
                                </p>
                                <button type="button" id="light_switch" class="btn door"
                                    style="margin-top: 0px;margin-left: 40%;width: auto;">
                                    打开警报灯
                                </button>
                                <p type="text" style="margin-top: 15%;margin-left: 40%;font-size: medium;">
                                    警报灯状态:<span class="condition" id="light_state">未打开</span>
                                </p>
                                <button type="button" id="door_switch" class="btn door"
                                    style="margin-top: 30px;margin-left: 40%;">
                                    开门
                                </button>
                                <button type="button" id="door_states_search" class="btn door"
                                    style="margin-top: 30px;margin-left: 60%;width: auto;">
                                    门锁状态查询
                                </button>
                                <p style="margin-top: 20%;margin-left: 40%;font-size: medium;">
                                    门锁状态：<span class="condition" id="door_states">门锁关闭</span></p>
                            </div>
                            <div class="input-group monitor_video col-xs-12 col-sm-12 col-md-8 col-lg-8"
                                style="height:485px;border:2px #830c0c solid;">
                                <img id="img1" width="640" height="480" src="" style="display: none;" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--页中-->
    <!--js-->
    <script src="./js/jquery-1.11.0.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/wsn/camera-1.1.js" type="text/javascript"></script>
    <script src="./js/wsn/WSNCamera.js" type="text/javascript"></script>
    <script src="./js/camera_script.js" type="text/javascript"></script>
    <script src="./js/door_script.js" type="text/javascript"></script>
    <script src="./js/detection_script.js" type="text/javascript"></script>
    <script src="./js/light_script.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/powerange.min.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/drawcharts.js"></script>
    <script type="text/javascript" src="js/wsn/WSNRTConnect.js"></script>
    <script type="text/javascript" src="js/wsn/WSNAutoctrl.js"></script>
    <script type="text/javascript" src="fusioncharts/currentdata.js"></script>
</body>

</html>